<template>
  <div >
    <el-container style="width: 1200px;margin: 0 auto;background-color:#fff;">
      <el-header style="height: 150px;padding: 25px;">
        <h1>员工业务管理</h1>
        <el-row :gutter="20">
          <el-col :span="6"></el-col>
          <el-col :span="6"></el-col>
          <el-col :span="8"></el-col>
          <el-col :span="4">
            <el-button type="warning" @click="backToEmpeManager">返回店铺管理主界面</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="height: 85vh;">
        <el-card>
          <div slot="header" class="clearfix">
            <span>员工业务信息</span>
          </div>
        </el-card>
        <el-card>
          <el-table :data="empeTableData">
            <el-table-column type="index" label="编号" width="100" align="center"></el-table-column>
            <el-table-column prop="username" label="员工名" align="center"></el-table-column>
            <el-table-column prop="title" label="员工职位" align="center"></el-table-column>
            <el-table-column prop="status" label="员工状态" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button type="primary" link size="small" @click="signIn">签到</el-button>
                <el-button type="primary" link size="small" @click="signOut">签退</el-button>
                <el-button type="primary" link size="small">请假</el-button>
                <el-button type="primary" link size="small">销假</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const empeTableData = ref([]);
const shopId = new URLSearchParams(window.location.search).get('shopId');
console.log(shopId);
const getEmpeData = ()=>{
  axios.get(BASE_URL+'/v1/job/select/empes/'+shopId)
      .then((response)=>{
        if (response.data.code == 2000){
          empeTableData.value = response.data.data;
          console.log(empeTableData.value);
        }else {
          ElMessage(response.data.msg);
        }
      })
}
onMounted(()=>{
  getEmpeData();
})
const backToEmpeManager = ()=>{
  window.location.href = '/shopManage';
}

const signIn = ()=>{
  ElMessage.success('签到成功');
}

const signOut = ()=>{
  ElMessage.success('签退成功');
}
</script>

<style scoped>

</style>